<template>
  <div class="simba-edit-footer">
    {{ sliderTextValue }}
    <div>
      <a-select
        v-model="sliderValue"
        ref="select"
        style="width: 120px"
      >
        <a-select-option value="200">200%</a-select-option>
        <a-select-option value="150">150%</a-select-option>
        <a-select-option value="100" disabled>100%</a-select-option>
        <a-select-option value="50">50%</a-select-option>
      </a-select>
    </div>
    <div class="scale-slider">
      <a-slider
        :default-value="sliderValue"
        :min="10"
        :max="200"
        :step="5"
        v-model:value="sliderValue"
        @change="onSliderChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
const chartEditStore = useChartEditStore();
const sliderValue = ref(10);
const sliderTextValue = ref(`10%`);
const onSliderChange = (e) => {
  chartEditStore.setScale(e / 100)
  console.log(e);
};
// 监听 scale 变化
watchEffect(() => {
  const value = (chartEditStore.editCanvas.scale * 100).toFixed(0)
  sliderTextValue.value = `${value}%`
  sliderValue.value = parseInt(value)
})
</script>
<style lang="scss" scoped>
@include simba("edit-footer") {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: $--footer-height;
  background: #232324;
  padding: 0 20px 0 30px;
  display: flex;
  justify-content: end;
  align-items: center;
  // background: #ccc;
  .scale-slider {
    width: 200px;
  }
}
</style>